<script setup lang="ts"></script>
<template>
  <div class="flex flex-direction-column justify-center items-center">
    <div class="w-200 h-full flex justify-center items-center select-none all:transition-400">
      <div>
        <button class="shadow-lg hover:shadow-xl backdrop-blur-sm">
          大阴影 + 悬停阴影放大 + 背景模糊
        </button>
        <div class="flex justify-between items-center gap-4">
          两端对齐 + 垂直居中 + 子元素间隔 1rem
        </div>
        <p class="text-lg font-bold italic underline truncate w-50">
          大号加粗斜体下划线 + 溢出省略
        </p>
        <div class="text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s">
          UnoCSS
        </div>
        <div class="text-lg fw300 m1 op30 hover-op80">测试hover</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
